<template>
    <div class="monitoring">
        <div class="left" v-if="activeIndex === 0">
            <div class="text">
                <p>{{config.systemName}}</p>
                <img src="../assets/img/mg427.png" alt="">
            </div>
            <div>
                <iframe ref="modelIframeTwo" :src="iframeSrc" width="1033" height="800" style="width:100%"></iframe>
            </div>
        </div>
        <div class="left tree" v-if="activeIndex === 1" style="width:20%">
            <div class="text">
                <p>{{config.systemName}}</p>
                <img src="../assets/img/mg427.png" alt="">
            </div>
            <div class="bottom">
                <div class="bottom-left">
                    <div class="tabs" style="margin-top:0">
                        <p>关键参数</p>
                        <img src="../assets/img/mg427.png" alt="">
                    </div>
                    <div class="infos">
                        <div class="top_border"></div>
                        <el-tree
                            :data="monitorListss"
                            :props="defaultProps"
                            accordion
                            :filter-node-method="filterNode"
                            :default-expanded-keys="[0]"
                            :highlight-current="true"
                            @node-click="handleNodeClick"
                            ref="tree">
                        </el-tree>
                        <div class="bottom_border"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="right" :style="{width:(activeIndex !== 0?'80%': bodySize ? '100%' : '40%')}">
            <div class="title" v-if="activeIndex === 0">
                <div class="tab">
                    <p :class="{'active': activeIndex === 0}" @click="choose(0)">在线监测</p>
                    <p :class="{'active': activeIndex === 1}" @click="choose(1)">趋势分析</p>                
                </div>
            </div>
            <div class="tabs">
                <p>{{activeIndex === 0 ? '在线监测' : '趋势分析'}}</p>
                <img src="../assets/img/mg427.png" alt="">
            </div>
            <div class="infos" v-if="activeIndex === 0">
                <div class="top_border"></div>
                <div class="all-btn">
                    <div style="font-weight:bold;margin-top:6px;font-size:14px">参数类型</div>
                    <div @click="btn(0)" :class="{'active': btnIndex === 0}">内冷系统</div>
                    <div @click="btn(1)" :class="{'active': btnIndex === 1}">外冷系统</div>
                    <div @click="btn(2)" :class="{'active': btnIndex === 2}">水处理系统</div>
                    <div @click="btn(3)" :class="{'active': btnIndex === 3}">阀厅环境</div>
                </div>
                <div class="item header btnTitle">
                        <p style="width:250px">监测参数</p>
                        <p>实时值</p>
                        <p>最大值</p>
                        <p>平均值</p>
                        <p>最小值</p>
                        <p style="width:120px;">报警值</p>
                    </div>
                <div class="list top">
                    
                    <div v-for="(item,index) in monitorList" :key="index" class="item">
                        <p style="width:250px">{{nameList[item.name].name}}</p>
                        <p :class="{'red': getColor(nameList[item.name].intoPolice,item.real)}" v-if="item.name !== 'P01currentA' && item.name !== 'P02currentA'">
                            {{item.real !== 'NaN' && item.real !== undefined ? Number(item.real).toFixed(2) : '-'}}
                        </p>
                        <p v-if="item.name !== 'P01currentA' && item.name !== 'P02currentA'">{{item.max !== 'NaN' && item.max !== undefined  ? Number(item.max).toFixed(2) : '-' }}</p>
                        <p v-if="item.name !== 'P01currentA' && item.name !== 'P02currentA'">{{item.avgD !== 'NaN' && item.avgD !== undefined  ? Number(item.avgD).toFixed(2) : '-'}}</p>
                        <p v-if="item.name !== 'P01currentA' && item.name !== 'P02currentA'">{{item.min !== 'NaN' && item.min !== undefined  ? Number(item.min).toFixed(2) : '-'}}</p>


                        <p :class="{'red': getColor(nameList[item.name].intoPolice,item.real) && item.real !== 1}" v-if="item.name === 'P01currentA' || item.name === 'P02currentA'">
                            {{item.real === 1 || item.real === 'NaN' || item.real === undefined ? '-' : Number(item.real).toFixed(2) }}
                        </p>
                        <p v-if="item.name === 'P01currentA' || item.name === 'P02currentA'">{{item.real === 1 || item.max === 'NaN' || item.max === undefined ? '-' : Number(item.max).toFixed(2)}}</p>
                        <p v-if="item.name === 'P01currentA' || item.name === 'P02currentA'">{{item.real === 1 || item.avgD === 'NaN' || item.avgD === undefined ? '-' : Number(item.avgD).toFixed(2)}}</p>
                        <p v-if="item.name === 'P01currentA' || item.name === 'P02currentA'">{{item.real === 1 || item.min === 'NaN' || item.min === undefined? '-' : Number(item.min).toFixed(2)}}</p>
                        
                        <p style="width:120px;">{{nameList[item.name].intoPolice}}</p>
                    </div>
                </div>
                <div class="bottom_border"></div>
            </div>
            <div class="analysis" v-if="activeIndex === 1 && isShowRight">
                <div class="temperature" style="margin-top:10%">
                    <div class="top_border"></div>
                    <div>
                        <temperature :keyItem="keyItem"/>
                    </div>
                    <div class="bottom_border"></div>

                </div>
                <!-- <div class="water">
                    <div class="top_border"></div>
                    <div>
                        <water :keyItem="keyItem"/>
                    </div>
                    <div class="bottom_border"></div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import temperature from '../components/temperature.vue'
export default {
    components:{
        temperature,
        // water
    },
    data(){
        return {
            keyItem:'',
            isShowRight:false,
            btnIndex:0,
            activeIndex: 0,
            isShow:false,
             btnList:[
                ['T_In_Valve','T_Out_Valve','F_Of_CW','P_In_Valve','P_Out_Valve','L_In_Tank','P_In_Tank',
                'L_rep_Tank','CW_Conduct','DW_Conduct','F_Of_DW','VB01_Feedback','VB02_Feedback','T_Of_H01','T_Of_H02','T_Of_H03',
                'P01currentA','P02currentA'],
                ['L_Buffer_Pool','BP_Conduct','Freq_M01_Feedback','Freq_M02_Feedback','Freq_M03_Feedback','Freq_M04_Feedback',
                'Freq_M05_Feedback','Freq_M06_Feedback'],
                ['Freq_E5_P01_Feedback','P_In_E5_PT01','P_Out_E5_PT02','P_In_E5_PT03','P_In_E5_PT04','P_discharge_E5_PT05',
                'QIT01_Conduct','QIT02_Conduct','F_Of_FIT01','ORPO_electric','F_Of_FIT02'],
                ['T_In_Hall','H_In_Hall','Envi_temp','T_Condensation']
            ],
            nameListss:{
                T_In_Valve:"进阀温度",
                T_Out_Valve:"出阀温度",
                F_Of_CW:"冷却水流量",
                P_In_Valve:"进阀压力",
                P_Out_Valve:"出阀压力",
                L_In_Tank:"膨胀罐液位",
                P_In_Tank:"膨胀罐压力",
                L_rep_Tank:"补水罐液位",
                CW_Conduct:"冷却水电导率",
                DW_Conduct:"去离子水电导率",
                F_Of_DW:"去离子水流量",
                VB01_Feedback:"VB01电动比例阀开度",
                VB02_Feedback:"VB02电动比例阀开度",
                T_Of_H01:"H01电加热器温度",
                T_Of_H02:"H02电加热器温度",
                T_Of_H03:"H03电加热器温度",
                P01currentA:"P01主泵电机电流",
                P02currentA:"P02主泵电机电流",
                L_Buffer_Pool:"缓冲水池液位",
                BP_Conduct:"喷淋水电导率",
                Freq_M01_Feedback:"M01风机运行频率",
                Freq_M02_Feedback:"M02风机运行频率",
                Freq_M03_Feedback:"M03风机运行频率",
                Freq_M04_Feedback:"M04风机运行频率",
                Freq_M05_Feedback:"M05风机运行频率",
                Freq_M06_Feedback:"M06风机运行频率",
                Freq_E5_P01_Feedback:"P01高压泵运行频率",
                P_In_E5_PT01:"PT01高压泵进水压力",
                P_Out_E5_PT02:"PT02高压泵出水压力",
                P_In_E5_PT03:"PT03反渗透二段膜组件进水压力",
                P_In_E5_PT04:"PT04反渗透三段膜组件进水压力",
                P_discharge_E5_PT05:"PT05反渗透浓水排放压力",
                QIT01_Conduct:"QIT01反渗透入水电导率",
                QIT02_Conduct:"QIT02反渗透产水电导率",
                F_Of_FIT01:"FIT01反渗透产水流量",
                ORPO_electric:"ORP0氧化还原电位",
                F_Of_FIT02:"FIT02反渗透浓水流量",
                T_In_Hall:"阀厅温度",
                H_In_Hall:"阀厅湿度",
                Envi_temp:"室外温度",
                T_Condensation:"凝露温度"
            },
            nameList:{
                T_In_Valve:{
                    name:"进阀温度",
                    intoPolice:'>47'
                },
                T_Out_Valve:{
                    name: "出阀温度",
                    intoPolice:'>61'
                },
                F_Of_CW:{
                    name: "冷却水流量",
                    intoPolice:'<126.9/>139.1'
                },
                P_In_Valve:{
                    name:"进阀压力",
                    intoPolice:'<0.56/>0.97'
                },
                P_Out_Valve:{
                    name:"出阀压力",
                    intoPolice:'<0.12/>0.35'
                },
                L_In_Tank:{
                    name:"膨胀罐液位",
                    intoPolice:'<30/>85'
                },
                P_In_Tank:{
                    name:"膨胀罐压力",
                    intoPolice:'<0.16/>0.28'
                },
                L_rep_Tank:{
                    name:"补水罐液位",
                    intoPolice:'<20'
                },
                CW_Conduct:{
                    name:"冷却水电导率",
                    intoPolice:'>0.5'
                },
                DW_Conduct:{
                    name:"去离子水电导率",
                    intoPolice:'>0.3'
                },
                F_Of_DW:{
                    name:"去离子水流量",
                    intoPolice:'<0.5'
                },
                VB01_Feedback:{
                    name:"VB01电动比例阀开度",
                    intoPolice:'-'
                },
                VB02_Feedback:{
                    name:"VB02电动比例阀开度",
                    intoPolice:'-'
                },
                T_Of_H01:{
                    name:"H01电加热器温度",
                    intoPolice:'>80'
                },
                T_Of_H02:{
                    name:"H02电加热器温度",
                    intoPolice:'>80'
                },
                T_Of_H03:{
                    name:"H03电加热器温度",
                    intoPolice:'>80'
                },
                P01currentA:{
                    name:"P01主泵电机电流",
                    intoPolice:'<142.5/>313.5'
                },
                P02currentA:{
                    name:"P02主泵电机电流",
                    intoPolice:'<142.5/>313.5'
                },
                L_Buffer_Pool:{
                    name:"缓冲水池液位",
                    intoPolice:'<40/>83'
                },
                BP_Conduct:{
                    name:"喷淋水电导率",
                    intoPolice:'>4000'
                },
                Freq_M01_Feedback:{
                    name:"M01风机运行频率",
                    intoPolice:'-'
                },
                Freq_M02_Feedback:{
                    name:"M02风机运行频率",
                    intoPolice:'-'
                },
                Freq_M03_Feedback:{
                    name:"M03风机运行频率",
                    intoPolice:'-'
                },
                Freq_M04_Feedback:{
                    name:"M04风机运行频率",
                    intoPolice:'-'
                },
                Freq_M05_Feedback:{
                    name:"M05风机运行频率",
                    intoPolice:'-'
                },
                Freq_M06_Feedback:{
                    name:"M06风机运行频率",
                    intoPolice:'-'
                },
                Freq_E5_P01_Feedback:{
                    name:"P01高压泵运行频率",
                    intoPolice:'-'
                },
                P_In_E5_PT01:{
                    name:"PT01高压泵进水压力",
                    intoPolice:'<0.15/>1.5'
                },
                P_Out_E5_PT02:{
                    name:"PT02高压泵出水压力",
                    intoPolice:'<0.15/>1.5'
                },
                P_In_E5_PT03:{
                    name:"PT03反渗透二段膜组件进水压力",
                    intoPolice:'-'
                },
                P_In_E5_PT04:{
                    name:"PT04反渗透三段膜组件进水压力",
                    intoPolice:'-'
                },
                P_discharge_E5_PT05:{
                    name:"PT05反渗透浓水排放压力",
                    intoPolice:'-'
                },
                QIT01_Conduct:{
                    name:"QIT01反渗透入水电导率",
                    intoPolice:'>600'
                },
                QIT02_Conduct:{
                    name:"QIT02反渗透产水电导率",
                    intoPolice:'>20'
                },
                F_Of_FIT01:{
                    name:"FIT01反渗透产水流量",
                    intoPolice:'>8'
                },
                ORPO_electric:{
                    name:"ORP0氧化还原电位",
                    intoPolice:'>400'
                },
                F_Of_FIT02:{
                    name:"FIT02反渗透浓水流量",
                    intoPolice:'-'
                },
                T_In_Hall:{
                    name:"阀厅温度",
                    intoPolice:'-'
                },
                H_In_Hall:{
                    name:"阀厅湿度",
                    intoPolice:'-'
                },
                Envi_temp:{
                    name:"室外温度",
                    intoPolice:'-'
                },
                T_Condensation:{
                    name:"凝露温度",
                    intoPolice:'-'
                }
            },
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            dataList:{
                0:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "None",
                    "Level4ObjName": "None",
                    "Health": "0"
                },
                1:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "None",
                    "Level4ObjName": "None",
                    "Health": "0"
                },
                2:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "水处理系统",
                    "Level3ObjName": "None",
                    "Level4ObjName": "None",
                    "Health": "0"
                },
                3:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "Y/Y C相阀塔",
                    "Level3ObjName": "None",
                    "Level4ObjName": "None",
                    "Health": "0"
                },
            }
        }
    },
    computed:{
        config(){
            const config = window.localStorage.getItem('config')
            return config ? JSON.parse(config) : {}
        },
        bodySize(){
            return this.$store.state.bodySize
        },
        monitorList(){
            const newList = []
            const list = this.$store.state.realTimeData
            if(list.length > 0){
                const item = list.reverse()[0]
                for(let i=0;i<this.btnList[this.btnIndex].length;i++){
                    const brnItem = this.btnList[this.btnIndex][i]
                    
                    newList.push({...item[brnItem],name:brnItem})
                }
            }else{
                for(let i=0;i<this.btnList[this.btnIndex].length;i++){
                    const brnItem = this.btnList[this.btnIndex][i]
                    
                    newList.push({name:brnItem})
                }
            }
            return newList
            
        },
        monitorListss(){
            let result = [
                {
                    id:1,
                    label:'内冷系统',
                    children:[]
                },
                {
                    id:2,
                    label:'外冷系统',
                    children:[]
                },
                {
                    id:3,
                    label:'水处理系统',
                    children:[]
                },
                {
                    id:4,
                    label:'阀厅环境',
                    children:[]
                }
            ]

            for(let key in this.nameListss){
                const item = {
                    key:key,
                    label:this.nameListss[key]
                }

                if(this.btnList[0].indexOf(key) !== -1){
                    result[0]['children'].push(item)
                }

                if(this.btnList[1].indexOf(key) !== -1){
                    result[1]['children'].push(item)
                }

                if(this.btnList[2].indexOf(key) !== -1){
                    result[2]['children'].push(item)
                }

                if(this.btnList[3].indexOf(key) !== -1){
                    result[3]['children'].push(item)
                }

            }
            
            return result
        },
        intoPolice(){
            return this.config.intoPolice
        },
        iframeSrc(){
            return `${this.config.modelUrl}NC/s3/?access_token=${this.config.token}`
        }
    },
    mounted(){
    },
    methods: {
        handleNodeClick(data) {
            if(data.key){
                this.isShowRight = false
                setTimeout(() => {
                    this.keyItem = data
                    this.isShowRight = true
                }, 500)
                    
            }
            
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 判断实时值的颜色
        getColor(intoPolice,real){
            if(real !== 'NaN' && real !== undefined && intoPolice !== '-'){
                // 判断是否中间有/
                const newIntoPolice = intoPolice.split('/')
                if(newIntoPolice.length === 2){
                    // 双向判断
                    const res1 = this.getResult(real,newIntoPolice[0])
                    const res2 = this.getResult(real,newIntoPolice[1])
                    if(res1 || res2){
                        return true
                    }else{
                        return false
                    }
                }else{
                    
                    const res1 = this.getResult(real,intoPolice)
                    
                    if(res1){
                        return true
                    }else{
                        return false
                    }
                }
            }else{
                return false
            }
        },
        // 得到颜色的结果
        getResult(real,intoPolice){
            if(intoPolice.indexOf('>') !== -1){
                if(Number(real) > Number(intoPolice.split('>')[1])){
                    return true
                }else{
                    return false
                }
            }
            if(intoPolice.indexOf('<') !== -1){
                if(Number(real) < Number(intoPolice.split('<')[1])){
                    return true
                }else{
                    return false
                }
            }
        },
        choose(index) {
            this.activeIndex = index
            // if(index === 1){
            //     let list
            //     const timer = setInterval(() => {
            //         list = this.$store.state.infoList.filter((item) => {
            //             return item.baseInfo.name === config.systemName
            //         })[0]
            //         if(list.uuid){
            //             clearInterval(timer)
            //             const params = {
            //                 uuid: list.uuid,
            //                 // uuid: 'C23A-2A8B-92C5-AAF3',
            //                 token:config.token,
            //                 start:"2021-8-12 13:55:12",
            //                 end:"2021-10-12 13:55:12"
            //             }
            //             getHistoryInfo(params,(res) => {
            //                 if(res.code === 200){
            //                     console.log('获取历史数据=', res.data)
            //                 }
            //             })
            //         }
            //     }, 1000)
            // }
        },
        btn(index){
            this.btnIndex = index

            let params = this.dataList[index]

            this.$refs.modelIframeTwo.contentWindow.postMessage({
                "clientId": "frame",
                "messageType": "Focus",
                "messageId": new Date().getTime(),
                "params": params
            },'*');
        }
    }
}
</script>
<style lang="less">
.monitoring{
    .el-table,.el-table thead,.el-form-item__label,.el-checkbox,.el-table__empty-text,.el-input__inner,.el-tree,.el-date-editor .el-range-input,
    .el-date-editor .el-range-separator{
        color: #8DCFF8;
    }
    .el-table th, .el-table tr,.el-table__body-wrapper,.el-input__inner,.el-tree,input{
        background: #1C2755 !important;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td,.el-tree-node__content:hover,.el-tree-node:focus>.el-tree-node__content{
        background: #0d1830;
    }
    .el-button--primary{
        margin-left: 20px;
    }
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
        background: #0d1830;
        color: #5273E0;
    }
    .el-tree-node__content>.el-tree-node__expand-icon{
        position: absolute;
        right: 20px;
    }
    .el-tree-node__label{
        padding-left: 10px;
    }
    .el-tree-node__content{
        height: 35px;
    }
    
}
.el-picker-panel,
.el-picker-panel [slot=sidebar],
.el-picker-panel__sidebar,
.el-picker-panel__shortcut,
.el-input__inner,
.el-picker-panel__footer,
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div,
.el-input.is-disabled .el-input__inner{
    background: #0d1830;
    color: #ffffff;
}
.el-button+.el-button{
    background: #164C7E !important;
    border-color: #409EFF;
    color: #ffffff;
}
.el-picker-panel__icon-btn{
    color: #FFFFFF;
}
</style>
<style lang="less" scoped>
.bottom{
    width: 100%;
    .bottom-left{
        margin: 20px 0;
    }
}
.left{
    margin-left: 10px !important;
}
.small{
    .monitoring{
        .left{
            display: none;
            &.tree{
                display: block;
            }
        }
        .right{
            width: 100%;
        }
        .list.top{
            height: 277px;
        }
        .analysis{
            height: 320px;
            overflow: auto;
            &::-webkit-scrollbar {
                /*滚动条整体样式*/
                width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
                height: 1px;
            }
            &::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                background   : #5273E0;
            }
            &::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 10px;
                background   : #164C7E;
            }
        }
    }
}
.btnTitle{
    height: 30px;
    display: flex;
    border-radius: 3px;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 10px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 100px;
    right: 10px;
    background: #164C7E !important;
    border-top: 1px solid #5273E0;
    border-left: 1px solid #5273E0;
    border-bottom: 1px solid #5273E0;
    p{
        height: 100%;
        line-height: 30px;
        border-right: 1px solid #5273E0;
    }
}
.list.top{
    overflow: auto;
    padding-top: 30px !important;
    min-height: 180px;
    padding:  30px 0 0 0 !important;
    .item{
        padding: 0 0 0 10px !important;
        border-left: 1px solid #5273E0;
        border-bottom: 1px solid #5273E0;
        p{
            height: 100%;
            line-height: 30px;
            border-right: 1px solid #5273E0;
        }
    }
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 3px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #5273E0;
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #164C7E;
    }
}
.monitoring{
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .left{
        width: 60%;
        height: 100%;
        border-right: 10px solid #0d1830;
        text-align: center;
        padding-left: 10px;
        .text{
            color: #8DCFF8;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 10px;
            img{
                width: 43px;
                margin-left: 10px;
            }
            &::before{
                position: absolute;
                content: '';
                width: 3px;
                height: 60%;
                top: 20%;
                left: 0;
                background: #8DCFF8;
            }
        }
    }
    .right{
        width: 40%;
        height: 100%;
        padding-right: 10px;
        .list-btn{
            margin: 20px 0 5px;
        }
        .title{
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            .download{
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #164C7E;
                size: 14px;
                border-radius: 3px;
                &:hover,&:active,&.active{
                    color: #8DCFF8;
                }
            }
            .tab{
                width: 100%;
                height: 40px;
                display: flex;
                position: relative;
                p{
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 10px;
                    background: #164C7E;
                    size: 16px;
                    color: #5273E0;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 3px;
                        &:hover,&:active,&.active{
                            color: #8DCFF8;
                        }
                    }
                .full{
                    padding-right: 10px;
                    img{
                    width: 30px;
                    height: 30px;
                    }

                }
            }
            
            }
        .tabs{
            color: #8DCFF8;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 10px;
            margin-bottom: 10px;
            img{
                width: 43px;
                margin-left: 10px;
            }
            &::before{
                position: absolute;
                content: '';
                width: 3px;
                height: 60%;
                top: 20%;
                left: 0;
                background: #8DCFF8;
            }
        }
        .infos{
            max-height: 80%;
            overflow: hidden;
        }
        .analysis>div,.infos{
            margin-bottom: 30px;
            border-top: 1px solid #164C7E;
            border-bottom: 1px solid #164C7E;
            position: relative;
            .top_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    top: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    top: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .bottom_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .all-btn{
                position: absolute;
                top: 0;
                left: 10px;
                width: 90px;
                height: 100%;
                background: #164C7E;
                color: #8DCFF8;
                div{
                    font-size: 12px;
                    height: 40px;
                    line-height: 40px;
                    padding-left: 10px;
                    &.active{
                        background: #0d1830;
                        color: #5273E0;
                    }
                }
            }
            .list{
                margin: 0px 10px 0 100px;
                padding: 10px 10px;
                background: rgba(22,76,126,0.2);
                .item{
                    height: 30px;
                    display: flex;
                    border-radius: 3px;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 10px;
                    color: #FFFFFF;
                    &.header{
                        font-size: 14px;
                        font-weight: bold;
                    }
                    &:nth-child(odd){
                        background: rgba(22,76,126,0.1);
                    }
                    .red{
                        color: red;
                    }
                }
            }
        }
        .infos{
            .item{
                p{
                    width: 16.6%;
                    text-align: center;
                    &:nth-child(1){
                        text-align: left;
                    }
                }
            }
        }
    }
}
.tabs{
    color: #8DCFF8;
    font-size: 14px;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 10px;
    margin-top: 10px;
    margin-left: 10px;
    img{
        width: 43px;
        margin-left: 10px;
    }
    &::before{
        position: absolute;
        content: '';
        width: 3px;
        height: 60%;
        top: 20%;
        left: 0;
        background: #8DCFF8;
    }
}
</style>
